import React, { memo, useEffect } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import { HonoredStyle } from "./style";
import {
  getCount,
  formalMinuteSeconds,
  getYearMonthDay,
} from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import { mvDetailAction } from "../../../pages/mv/store/actionTypes";
import {
  videoDetailAction,
  allvideoAction,
} from "../../../pages/video/store/actionTypes";

export default memo(function Honored(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    if (!props.video) {
      dispatch(mvDetailAction(props.mvid));
    } else {
      dispatch(videoDetailAction(props.mvid));
    }
    dispatch(allvideoAction(props.mvid));
  }, [dispatch, props.mvid, props.video]);

  const { mvDetailState, mvallVedio } = useSelector(
    (state) => ({
      mvDetailState: !props.video
        ? state.getIn(["mv", "mvDetailR"])
        : state.getIn(["video", "videoDetail"]),
      mvallVedio: state.getIn(["video", "allVideo"]),
    }),
    shallowEqual
  );

  return (
    <HonoredStyle>
      <div className="mv-right">
        <h3 className="mv-h3">
          <span>MV简介</span>
        </h3>
        <div className="mv-right-text">
          <p className="mv-rp">
            发布时间：
            {mvDetailState.length !== 0
              ? !props.video
                ? mvDetailState.data.publishTime
                : getYearMonthDay(mvDetailState.data.publishTime)
              : ""}
          </p>
          <p className="mv-rp">
            播放次数：
            {getCount(
              mvDetailState.length !== 0
                ? !props.video
                  ? mvDetailState.data.playCount
                  : mvDetailState.data.playTime
                : ""
            )}
          </p>
          <p className="mv-desc">
            {mvDetailState.length !== 0 ? mvDetailState.data.desc : ""}
          </p>
        </div>
        <div className="mv-right-simi">
          <h3 className="mv-h3">
            <span>相关推荐</span>
          </h3>
          <div className="simi-mv-box">
            {mvallVedio.length !== 0
              ? mvallVedio.data.map((item, index) => {
                  return (
                    <div key={index} className="simi-mv-div">
                      <div className="simi-mv-img">
                        <NavLink
                          to={{
                            pathname: "/video",
                            search: "?id=" + item.vid,
                          }}
                        >
                          <img src={item.coverUrl} alt="" />
                        </NavLink>
                        <p className="msk maskP">
                          <span className="msk-mv icon2"></span>
                          {getCount(item.playTime)}
                        </p>
                      </div>
                      <div className="simi-mv-content">
                        <NavLink
                          to={{
                            pathname: /[A-Za-z]/.test(item.vid)
                              ? "/video"
                              : "/mv",
                            search: "?id=" + item.vid,
                          }}
                          className="siminame"
                        >
                          {item.title}
                        </NavLink>
                        <p>{formalMinuteSeconds(item.durationms)}</p>
                        <span>
                          by{" "}
                          <NavLink
                            to={{
                              pathname: "/user/home",
                              search: "?id=" + item.creator[0].userId,
                            }}
                          >
                            {item.creator[0].userName}
                          </NavLink>
                        </span>
                      </div>
                    </div>
                  );
                })
              : ""}
          </div>
        </div>
      </div>
    </HonoredStyle>
  );
});
